<template>
  <div class="card-content1 shadow-box background-opacity">
    <div class="text">
      <img
        :src="this.$store.state.themeObj.head_portrait ? this.$store.state.themeObj.head_portrait : 'static/img/tou.png'"
        alt="图片丢失！">
      <div>
        <p class="welcome">欢迎来自<span style="font-size: 1.7rem;">{{ this.location.province + this.location.city
            }}</span>的朋友<br/></p>
      </div>
    </div>
    <div class="welcome" style="margin:20px;text-align: center;">
      <p>今日天气</p>
      <el-row>
        <el-col :span="12" style="margin-top: 20px;text-align:left">
          <p>温度:{{ weather.temperature }}℃</p>
          <p>天气:{{ weather.weather }}</p>
          <p>风向:{{ weather.winddirection }}</p>
          <p>风力:{{ weather.windpower }}</p>
        </el-col>
        <el-col :span="12">
          <img :src="weather.imgurl">
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getLocation, getIptext } from "../api/location";
export default {

  name: 'GradientRoundedBlock',
  data() {
    return {
      location: {
        province: '云南',
        city: '玉溪',
      },
      weather: {
        temperature: '',
        weather: '',
        winddirection: '',
        windpower: '',
        imgurl: '',
      }
    };
  },
  methods: {
    getlocation() {
      getLocation().then((response) => {
        if (response.city != null) {
          this.location.province = response.province,
            this.location.city = response.city
          if (this.location.province == this.location.city) {
            this.location.city = ''
          }
        } else {
          console.log(response)
        }
        this.weather.temperature = response.lives.temperature;
        this.weather.weather = response.lives.weather;
        this.weather.winddirection = response.lives.winddirection;
        this.weather.windpower = response.lives.windpower;
        if (this.weather.weather.includes("晴")) {
          this.weather.imgurl = "../../static/img/weatherimg/晴.gif"
        } else if (this.weather.weather.includes("雪")) {
          this.weather.imgurl = "../../static/img/weatherimg/雪.gif"
        } else if (this.weather.weather.includes("雨")) {
          this.weather.imgurl = "../../static/img/weatherimg/雨.gif"
        }
        else if (this.weather.weather.includes("阴")) {
          this.weather.imgurl = "../../static/img/weatherimg/阴.gif"
        } else if (this.weather.weather.includes("风")) {
          this.weather.imgurl = "../../static/img/weatherimg/风.gif"
        } else if (this.weather.weather.includes("雾")) {
          this.weather.imgurl = "../../static/img/weatherimg/雾.gif"
        }
        else {
          this.weather.imgurl = "../../static/img/weatherimg/多云.gif"
        }
      })
    },
    getIptext() {
      getIptext().then((response) => {
        console.log(response)
      })
    }
  },
  mounted() {

  },
  created() {
    this.getlocation();
    this.getIptext();
  },
  beforeDestroy() {

  },
  computed: {

  }
}
</script>

<style scoped>
.welcome {
  font-family: 'welcomeFont';
  font-size: 18px;
}

img {
  margin: 25px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  object-fit: cover;
}

img:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.text {
  text-align: center;
  position: relative;

}

.time-display {
  margin: 10px;
  font-size: 30px;
}

.card-content1 {
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 400px;
}

@keyframes gradientBG {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.shadow-box {
  box-shadow: 0 1px 20px -6px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.shadow-box:hover {
  box-shadow: 0 5px 10px 5px rgba(110, 110, 110, 0.4);
}
</style>